<template>
  <BasicContainer class="activiti-detail">
    <div class="header">
      <p class="header__title">{{ name }}</p>
      <ElButton class="header__btn" type="primary" @click="breaks"> 关闭返回列表 </ElButton>
    </div>

    <ElScrollbar class="main">
      <iframe :src="src" class="iframe"></iframe>
    </ElScrollbar>
  </BasicContainer>
</template>

<script>
  export default {
    data() {
      return {
        id: '',
        name: '',
        src: ''
      }
    },
    watch: {
      $route() {
        this.init()
      }
    },
    created() {
      this.init()
    },
    methods: {
      init() {
        this.id = this.$route.params.id
        this.name = this.$route.query.name
        this.src = this.actUrl + this.id
      },
      breaks() {
        this.closeTag()
        this.$router.push({ path: '/activiti/index' })
      }
    }
  }
</script>

<style lang="scss">
  .activiti-detail {
    height: 99%;

    .header {
      position: relative;
      display: flex;
      align-items: center;

      &__title {
        font-size: 22px;
      }

      &__btn {
        position: absolute;
        right: 10px;
      }
    }

    .main {
      box-sizing: border-box;
      width: 99%;
      height: calc(100% - 100px);
      margin: 0 auto;
      padding: 20px;
      background-color: #fff;
      border-radius: 3px;
    }

    .iframe {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      overflow: hidden;
      border: 0;
    }
  }
</style>
